
<template>
  <div>
    <el-row type="flex">
      <el-col
        class="formWarp"
        :span="24"
        style="margin-left: 10px"
      >
        <h2 style="text-align: center; font-size: 30px;">
          大 组 工 网 网 络 安 全 管 理 制 度 备 案 表
        </h2>
        <div style="display: flex;justify-content: flex-end;margin-right:20px;">
          <el-button type="primary" plain @click="onSubmit" size="medium">保  存</el-button>
        </div>
        <div class="infohead">
          <p>填报单位:<input v-model="fillingOrg" class="inputVal"/></p>
          <p>填表人:<input v-model="fillingPerson" class="inputVal" /></p>
          <p>联系方式:<input v-model="fillingTel" class="inputVal" /></p>
        </div>
        <div class="tableWarp" :style="{ height: heightTable }" style="overflow-y: scroll;margin-top:10px;">
          <table border="1" class="myTable">
            <tr>
              <td colspan="2" style="text-align: left; font-size: 16px;" class="bgtd">
                大组工网网络安全管理制度建立情况
              </td>
            </tr>
            <tr>
              <td class="bgtd">管理制度</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.managementSystem"
                  @change="handleCheckManagementSystem"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="uploadUrl"
                  :on-preview="handlePreview"
                  :on-success="uploadSuccess"
                  :before-upload="before_upload"
                  :multiple="fileMultiple"
                  :limit="1"
                  :file-list="fileList"
                >
                  <el-button type="primary" style="font-size:14px;">上传电子版</el-button>
                  <div slot="tip" class="el-upload__tip" style="font-size:14px;">
                    允许上传pdf格式,且不超过100MB
                  </div>
                </el-upload>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: left; font-size: 16px;" class="bgtd">
                制度包含主要内容
              </td>
            </tr>
            <tr>
              <td class="bgtd">网络运行安全</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.netRunSafe"
                  @change="handleCheckNetRunSafe"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
            <tr>
              <td class="bgtd">网络信息安全</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.netMessageSafe"
                  @change="handleCheckNetMessageSafe"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
            <tr>
              <td class="bgtd">监测预警与应急处置</td>
              <td style="text-align: left">
                <el-checkbox-group
                  v-model="formQuery.warnDispose"
                  @change="handleCheckWarnDispose"
                >
                  <el-checkbox label="1">有</el-checkbox>
                  <el-checkbox label="0">暂无</el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import {getSystemList,getSystemSave,getSystemUpdate} from "@/api/datacentersg/personnelPut/personnelPut.js"
import store from "@/store";
import webapp from "@/config/webapp";

class Photo {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

export default {
  data() {
    return {
      fillingOrg:"",
      fillingPerson:"",
      fillingTel:"",
      formQuery: {
        managementSystem: [],
        netRunSafe: [],
        netMessageSafe: [],
        warnDispose: [],
        managementFile:"",
      },
      uploadUrl: webapp.uploadUrl,
      heightTable: window.innerHeight - 270 + "px",
      fileMultiple: false,
      fileList: [],
      id:"",
    };
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
        const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           type:"1",
        }
        getSystemList(params).then((result) =>{
            if(result.result){
              this.id = result.resultdata[0].id
              this.fillingOrg=result.resultdata[0].fillingOrg
              this.fillingPerson=result.resultdata[0].fillingPerson
              this.fillingTel=result.resultdata[0].fillingTel
              this.formQuery.managementSystem=[];
              this.formQuery.managementSystem.push(result.resultdata[0].managementSystem.toString());
              this.formQuery.netRunSafe= [];
              this.formQuery.netRunSafe.push(result.resultdata[0].netRunSafe.toString())
              this.formQuery.netMessageSafe= [];
              this.formQuery.netMessageSafe.push(result.resultdata[0].netMessageSafe.toString())
              this.formQuery.warnDispose= [];
              this.formQuery.warnDispose.push(result.resultdata[0].warnDispose.toString())
              this.formQuery.managementFile = result.resultdata.managementFile;
              const photoList = [];
              if (result.resultdata[0].managementFile) {
                photoList.push(new Photo("管理制度附件", result.resultdata[0].managementFile));
              } else {
                this.fileList = [];
              }
              this.fileList = photoList;
              }
         })
    },
    handleCheckManagementSystem(value) {
      if(value[0] === '0'){
        this.fileList = [];
        this.formQuery.managementFile= "";
      }
      if(this.formQuery.managementSystem.length > 1) {
        this.formQuery.managementSystem.splice(0,1)
      }
    },
    handleCheckNetRunSafe() {
      if(this.formQuery.netRunSafe.length > 1) {
        this.formQuery.netRunSafe.splice(0,1)
      }
    },
    handleCheckNetMessageSafe() {
      if(this.formQuery.netMessageSafe.length > 1) {
        this.formQuery.netMessageSafe.splice(0,1)
      }
    },
    handleCheckWarnDispose() {
      if(this.formQuery.warnDispose.length > 1) {
        this.formQuery.warnDispose.splice(0,1)
      }
    },
    handlePreview(file) {
      window.open(file.url);
    },
    before_upload(file) {
        // console.log(file,"filename");
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(fileType);
        // 判断文件名的类型，允许多种就判断多个
        if (fileType == 'pdf') {
            console.log(file);
        } else {
            this.$message({
                message: '文件类型必须为pdf格式',
                type: 'warning'
            });
            // 返回false 就不会执行上传操作了
            return false
        }
    },
    uploadSuccess(response, file, fileList){
        this.$message.success("上传成功！")
        this.formQuery.managementFile = response.url; 
    },
    onSubmit(){
      if(this.id == ""){
        const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           data:{
              fillingOrg:this.fillingOrg,
              fillingPerson:this.fillingPerson,
              fillingTel:this.fillingTel,
              managementSystem:this.formQuery.managementSystem[0],
              netRunSafe:this.formQuery.netRunSafe[0],
              netMessageSafe:this.formQuery.netMessageSafe[0],
              warnDispose:this.formQuery.warnDispose[0],
              managementFile:this.formQuery.managementFile,
           }
        }
        getSystemSave(params).then((result) =>{
          if(result.result){
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.getList();
            }
        })
      }else if(this.id != null){
        const params = {
          userId:store.getters.user_id.toString(),
          token:store.getters.token.toString(),
          data:{
            id:this.id,
            fillingOrg:this.fillingOrg,
            fillingPerson:this.fillingPerson,
            fillingTel:this.fillingTel,
            managementSystem:this.formQuery.managementSystem[0],
            netRunSafe:this.formQuery.netRunSafe[0],
            netMessageSafe:this.formQuery.netMessageSafe[0],
            warnDispose:this.formQuery.warnDispose[0],
            managementFile:this.formQuery.managementFile,
          }
        }
        getSystemUpdate(params).then((result) => {
              if(result.result){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.getList();
              }
        })
      }
    }
  },
};
</script>
  
  <style scoped>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
  /* margin-left:10px; */
}
.infohead{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0px 0px 20px 0px;
  font-family: SimHei;
}
.infohead p{
  font-size:18px;
}
.inputVal{
  border: none;
  border-bottom:1px solid #000;
  font-size:16px;
  font-family:SimSun;
  color:#000;
  margin-left:10px;
  text-align: center;
}
.tableWarp {
  scrollbar-color: #46a6ff #409eff;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
  font-family: SimHei
}
.myTable .bgtd{
  background:#B0E2FF !important;
}
.myTable tbody {
  width: 100%;
}
>>>.el-checkbox__label{
  font-size:16px;
}
.myTable td {
  word-wrap: break-word;
  font-size: 16px;
  padding: 15px 10px;
  text-align: center;
}
</style>